<template>
  <div>
    <!-- 创建一个中国地图的容器 -->
    <div id="china_container" style="height: 800px"></div>
    <!-- 创建一个江苏地图的容器 -->
    <div id="jiangsu_container" style="height: 800px"></div>
    <!-- 创建一个苏州地图的容器 -->
    <div id="suzhou_container" style="height: 800px"></div>
  </div>
</template>

<!-- 方法 -->
<script>
// 引入本地数据
import data from '@/data/data.json'
import suzhouGeoJSON from '@/assets/suzhou.json'
export default {
  data() {
    return {
      // 中国疫情数据
      china_data: [],
      // 江苏省疫情数据
      jiangsu_data: [],
      // 苏州市疫情数据
      suzhou_data: []
    }
  },

  mounted() {
    // 加载中国疫情数据
    this.china_data = data.data.areaTree[2].children.map((item) => ({
      name: item.name,
      value: item.total.confirm
    }))
    // 自动显示加载中国地图数据
    this.loadChinaMap()

    // 加载江苏省疫情数据
    this.jiangsu_data = data.data.areaTree[2].children[19].children.map(
      (item) => ({ name: item.name, value: item.total.confirm })
    )
    console.log(this.jiangsu_data)
    // 自动加载显示江苏省地图数据
    this.loadJiangsuMap()

    // 加载苏州数据
    const suzhouAreas = [
      '姑苏区',
      '虎丘区',
      '常熟市',
      '昆山市',
      '吴江区',
      '张家港市',
      '吴中区',
      '相城区',
      '太仓市'
    ]
    this.suzhou_data = suzhouAreas.map((v) => {
      return {
        name: v,
        value: Math.floor(Math.random() * 100) // 生成随机数
      }
    })
    // 加载苏州市地图数据
    this.loadSuzhouMap()
  },

  methods: {
    // 加载中国地图数据
    loadChinaMap() {
      // 随机数据
      var data = this.china_data
      // 初始化图表
      // eslint-disable-next-line no-undef
      new Highcharts.Map('china_container', {
        // 主标题
        title: {
          text: '国内新型冠状病毒肺炎疫情分布'
        },
        // 设置每个区间的颜色
        colorAxis: {
          dataClasses: [
            {
              color: '#FFE1B3',
              to: 10
            },
            {
              color: '#FDCFA7',
              from: 10,
              to: 100
            },
            {
              color: '#FBB998',
              from: 100,
              to: 1000
            },
            {
              color: '#F59E83',
              from: 1000,
              to: 5000
            },
            {
              color: '#E55A4E',
              from: 5000,
              to: 10000
            },
            {
              color: '#CB2A2F',
              from: 10000,
              to: 50000
            },
            {
              color: '#70161d',
              from: 100000
            }
          ]
        },
        series: [
          {
            // 数据源
            data: data,
            name: '各省份现有确诊病例',
            mapData: Highcharts.maps['cn/china'],
            joinBy: 'name' // 根据 name 属性进行关联
          }
        ]
      })
    },
    // 加载江苏地图数据
    loadJiangsuMap() {
      // 随机数据
      const data = this.jiangsu_data
      // 初始化图表
      const map = new Highcharts.Map('jiangsu_container', {
        title: {
          text: '江苏省现有确诊分布情况'
        },
        colorAxis: {
          // 设置每个区间的颜色
          dataClasses: [
            {
              color: '#FFE1B3',
              to: 10
            },
            {
              color: '#FDCFA7',
              from: 10,
              to: 100
            },
            {
              color: '#FBB998',
              from: 100,
              to: 1000
            },
            {
              color: '#F59E83',
              from: 1000,
              to: 5000
            },
            {
              color: '#E55A4E',
              from: 5000,
              to: 10000
            },
            {
              color: '#CB2A2F',
              from: 10000,
              to: 50000
            },
            {
              color: '#70161d',
              from: 100000
            }
          ]
        },
        series: [
          {
            // 数据源
            data: data,
            name: '江苏各地现有确诊人数',
            mapData: Highcharts.maps['cn/jiangsu'],
            joinBy: 'name' // 根据 name 属性进行关联
          }
        ]
      })
    },
    // 加载苏州地图数据
    loadSuzhouMap() {
      // 随机数据
      const data = this.suzhou_data
      console.log(data)
      // 初始化图表
      const map = new Highcharts.Map('suzhou_container', {
        title: {
          text: '苏州市现有确诊分布情况'
        },
        colorAxis: {
          // 设置每个区间的颜色
          dataClasses: [
            {
              color: '#FFE1B3',
              to: 10
            },
            {
              color: '#FDCFA7',
              from: 10,
              to: 100
            },
            {
              color: '#FBB998',
              from: 100,
              to: 1000
            },
            {
              color: '#FAA68A',
              from: 1000,
              to: 5000
            },
            {
              color: '#F8947D',
              from: 5000,
              to: 10000
            },
            {
              color: '#F57669',
              from: 10000,
              to: 50000
            },
            {
              color: '#F2544E',
              from: 100000
            }
          ]
        },
        series: [
          {
            // 数据源
            data: data,
            name: '苏州各地现有确诊人数',
            mapData: suzhouGeoJSON,
            joinBy: 'name' // 根据 name 属性进行关联
          }
        ]
      })
    }
  }
}
</script>

<style scoped></style>
